<template>
  <div class="box-analysis">
    <!-- <div class="box-search">
        <div class="box-search-left">
        </div>
        <div class="box-search-right">
            <el-button  type="primary" size="small">小型按钮</el-button> 
            <el-button  type="primary" size="small">小型按钮</el-button>
        </div>
    </div> -->
    <div class="box-controller">
      <div class="box-search">
        <div class="box-search-left">
          <div class="box-tabs">
            <div :class="isEmpty(tabIndex) ? 'item-active' : ''" @click="changeTab('')" class="item">
              <span>全部</span>
            </div>
            <div :class="tabIndex === '2' ? 'item-active' : ''" @click="changeTab('2')" class="item">
              <span>待审批</span>
            </div>
            <!-- <div :class="tabIndex === '2' ? 'item-active' : ''" @click="changeTab('2')" class="item">
              <span>已处理</span>
            </div> -->
            <div :class="tabIndex === '3' ? 'item-active' : ''" @click="changeTab('3')" class="item">
              <span>已通过</span>
            </div>
            <div :class="tabIndex === '0' ? 'item-active' : ''" @click="changeTab('0')" class="item">
              <span>已驳回</span>
            </div>
            <!-- <div :class="tabIndex === '4' ? 'item-active' : ''" @click="changeTab('4')" class="item">
              <span>作废</span>
            </div> -->
          </div>
        </div>
        <div class="box-search-right">
          <el-input size="mini" v-model="searchInpt" placeholder="请输入关键字" class="zdy-input" clearable> </el-input>
          <el-button type="primary" class="zdy-btn" @click="searchWay">
            <el-icon style="vertical-align: middle">
              <Search />
            </el-icon>
          </el-button>
        </div>
      </div>
      <div class="controller-page">
        <div class="card-table">
          <div class="card-total-txt">
            <span>共搜索到{{ total }}条数据</span>
          </div>
          <div class="card-list">
            <el-card class="card-item" v-for="(item, index) in dataList" :key="index">
              <div class="card-item-head">
                <div class="headLeft">
                  <div class="avatar">
                    <!-- <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" /> -->
                    <el-avatar :size="32" fit="fit" :icon="UserFilled" />
                  </div>
                  <div class="title">
                    <span>{{ item.applicationNo }}</span>
                  </div>
                </div>
                <div class="btn">
                  <el-tag
                    :type="
                      item.status === '0'
                        ? 'danger'
                        : item.status === '2'
                          ? 'primary'
                          : item.status === '3'
                            ? 'success'
                            : item.status === '4'
                              ? 'info'
                              : 'primary'
                    "
                    >{{
                      item.status === "0"
                        ? "已驳回"
                        : item.status === "2"
                          ? "待审核"
                          : item.status === "3"
                            ? "已通过"
                            : item.status === "4"
                              ? "作废"
                              : item.status
                    }}</el-tag
                  >
                </div>
              </div>
              <div class="card-item-body">
                <span>说明：{{ item.reason }}</span>
              </div>
              <div class="card-item-footer">
                <div class="time">
                  <span>{{ item.updatedAt }}</span>
                </div>
                <div class="correct" v-if="userType === 'data_audit' && item.status === '2'">
                  <el-button size="small" type="primary" @click="approveHandle(item)">同意</el-button>
                  <el-button size="small" @click="rejectHandle(item)">拒绝</el-button>
                </div>
                <div class="footerRight">
                  <!-- <div class="edit">
                    <el-icon><Edit /></el-icon>
                  </div> -->
                  <el-dropdown trigger="click" v-if="item.status === '2' && item.isInvalidated === '1'">
                    <span class="el-dropdown-link">
                      <div class="operate">
                        <el-icon><MoreFilled /></el-icon>
                      </div>
                    </span>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <!-- <el-dropdown-item>关闭</el-dropdown-item> -->
                        <el-dropdown-item @click="revokeWay(item)">作废</el-dropdown-item>
                        <!-- <el-dropdown-item>删除</el-dropdown-item> -->
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </div>
            </el-card>
          </div>
          <div class="card-pagination">
            <!-- <el-pagination background layout="prev, pager, next" :total="1000" /> -->
            <!-- :page-sizes="[100, 200, 300, 400]" -->
            <el-pagination
              :small="true"
              v-model:current-page="paramOpt.pageNum"
              v-model:page-size="paramOpt.pageSize"
              layout="total, prev, pager, next, jumper"
              :total="total"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>

      <div class="statisticsTitle">
        <div class="title"><span>统计信息</span></div>
        <div class="subTitle"><span>本月统计</span></div>
      </div>
      <div class="statisticsList">
        <div class="sl-item">
          <div class="sl-item-left">
            <el-image class="img" :src="statisticsImg5" :fit="fit" />
          </div>
          <div class="sl-item-right">
            <div class="txt"><span>数据上屏(个)</span></div>
            <div class="count">
              <span>
                <countTo :startVal="0" :endVal="statistics?.displayedDataCount" :duration="3000"></countTo>
              </span>
            </div>
          </div>
        </div>
        <div class="sl-item">
          <div class="sl-item-left">
            <el-image class="img" :src="statisticsImg1" :fit="fit" />
          </div>
          <div class="sl-item-right">
            <div class="txt"><span>已处理申请(个)</span></div>
            <div class="count">
              <span>
                <countTo :startVal="0" :endVal="statistics?.processedRequestsCount" :duration="3000"></countTo>
              </span>
            </div>
          </div>
        </div>
        <div class="sl-item">
          <div class="sl-item-left">
            <el-image class="img" :src="statisticsImg2" :fit="fit" />
          </div>
          <div class="sl-item-right">
            <div class="txt"><span>剩余待处理(个)</span></div>
            <div class="count">
              <span>
                <countTo :startVal="0" :endVal="statistics?.pendingProcessingCount" :duration="3000"></countTo>
              </span>
            </div>
          </div>
        </div>
        <div class="sl-item">
          <div class="sl-item-left">
            <el-image class="img" :src="statisticsImg3" :fit="fit" />
          </div>
          <div class="sl-item-right">
            <div class="txt"><span>待审批申请(个)</span></div>
            <div class="count">
              <span>
                <countTo :startVal="0" :endVal="statistics?.awaitingApprovalCount" :duration="3000"></countTo>
              </span>
            </div>
          </div>
        </div>
        <div class="sl-item">
          <div class="sl-item-left">
            <el-image class="img" :src="statisticsImg4" :fit="fit" />
          </div>
          <div class="sl-item-right">
            <div class="txt"><span>已提交申请(个)</span></div>
            <div class="count">
              <span>
                <countTo :startVal="0" :endVal="statistics?.submittedRequestsCount" :duration="3000"></countTo>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue"
import { Search, UserFilled } from "@element-plus/icons-vue"
import { CountTo } from "vue3-count-to"

import statisticsImg1 from "@/assets/dashboard/img1.png"
import statisticsImg2 from "@/assets/dashboard/img2.png"
import statisticsImg3 from "@/assets/dashboard/img3.png"
import statisticsImg4 from "@/assets/dashboard/img4.png"
import statisticsImg5 from "@/assets/dashboard/img5.png"
import { isEmpty } from "lodash-es"
import { homePage, statsSnapshot } from "../../api/dashboard/analysis"
import { ElMessage, ElMessageBox } from "element-plus"
import { audits } from "../../api/datamanage/dataReview"
import { revokeInvalid } from "../../api/datamanage/fillreport"

onMounted(() => {
  getList()
  getStatsSnapshot()
})

const tabIndex = ref("")
function changeTab(index) {
  tabIndex.value = index
  getList()
}

const searchInpt = ref("")
function searchWay() {
  getList()
}

const dataList = ref([])
const paramOpt = ref({
  pageNum: 1,
  pageSize: 16
})
const total = ref(0)
// 用户类型：data_audit 指标审核用户 ordinary_user 普通用户
const userType = ref("")

function handleCurrentChange(val) {
  console.log(`当前页: ${val}`)
  paramOpt.pageNum = val
  getList()
}

async function getList() {
  const { data } = await homePage({
    status: tabIndex.value,
    query: searchInpt.value,
    pageNum: paramOpt.value.pageNum,
    pageSize: paramOpt.value.pageSize
  })
  dataList.value = data.applicationPage.records
  total.value = data.applicationPage.total
  userType.value = data.userType
}

// 通过审批
const approveHandle = (row) => {
  ElMessageBox.confirm(`确认通过申请 ${row.applicationNo} 吗？`, "通过确认", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "success"
  }).then(async () => {
    await audits({
      applicationId: row.id,
      applicationNo: row.applicationNo,
      status: "3"
    })
    ElMessage.success("已通过审批")
    getList()
    getStatsSnapshot()
  })
}

// 驳回审批
const rejectHandle = (row) => {
  ElMessageBox.prompt(`请输入驳回${row.applicationNo}原因`, "驳回确认", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    inputType: "textarea",
    inputPlaceholder: "请输入驳回原因(非必填)",
    type: "warning"
  }).then(async ({ value }) => {
    await audits({
      applicationId: row.id,
      applicationNo: row.applicationNo,
      approvalComment: value || "",
      status: "0"
    })
    ElMessage.error(`已驳回审批`)
    getList()
    getStatsSnapshot()
  })
}

// 作废
function revokeWay(row) {
  ElMessageBox.confirm("是否确认作废该审批？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(async () => {
      await revokeInvalid({
        applicationId: row.id,
        applicationNo: row.applicationNo,
        status: "4"
      })
      ElMessage.success("已作废")
      getList()
      getStatsSnapshot()
    })
    .catch(() => {})
}

const statistics = ref()
async function getStatsSnapshot() {
  const { data } = await statsSnapshot()
  statistics.value = data
}
</script>
<style scoped lang="scss">
.card-item {
  width: 375px;
  height: 170px;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #e5e6eb;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 0 0 0;
  box-sizing: border-box;
  ::v-deep .el-card__body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
  }
  .card-item-head {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    box-sizing: border-box;
    .headLeft {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: row;
    }
    .avatar {
      width: 32px;
      height: 32px;
      border-radius: 100;
      overflow: hidden;
    }
    .title {
      width: auto;
      height: 100%;
      display: flex;
      align-items: center;
      padding-left: 5px;
      span {
        font-family:
          Microsoft YaHei,
          Microsoft YaHei;
        font-weight: 600;
        font-size: 16px;
        color: #333333;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
    }
    .btn {
    }
  }
  .card-item-body {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    padding: 0 15px;
    box-sizing: border-box;
    span {
      display: inline-block;
      line-height: 16px;
      font-family:
        Microsoft YaHei,
        Microsoft YaHei;
      font-weight: 600;
      font-size: 14px;
      color: #999999;
      text-align: left;
      font-style: normal;
      text-transform: none;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3; /*省略几行写几*/
      -webkit-box-orient: vertical;
    }
  }
  .card-item-footer {
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #e5e6eb;
    padding: 0 15px;
    box-sizing: border-box;
    .time {
      span {
        font-family: Helvetica, Helvetica;
        font-weight: 400;
        font-size: 14px;
        color: #999999;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
    }
    .correct {
    }
    .footerRight {
      width: auto;
      height: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-end;
      .edit {
        margin-right: 5px;
      }
      .operate {
        cursor: pointer;
      }
    }
  }
}

.statisticsTitle {
  width: 100%;
  height: 30px;
  line-height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  box-sizing: border-box;
  .title {
    font-family:
      Microsoft YaHei,
      Microsoft YaHei;
    font-weight: 600;
    font-size: 18px;
    color: #333333;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
  .subTitle {
    font-family:
      Microsoft YaHei,
      Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
}
.statisticsList {
  width: 100%;
  height: 112px;
  line-height: 112px;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #e5e6eb;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
  .sl-item {
    height: 64px;
    display: flex;
    flex-direction: row;
    align-items: center;
    .sl-item-left {
      width: 64px;
      height: 64px;
      .img {
        width: 100%;
        height: 100%;
      }
    }
    .sl-item-right {
      width: auto;
      height: 64px;
      line-height: normal;
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      justify-content: space-around;
      padding: 0 0 3px 10px;
      .txt {
        font-family:
          Microsoft YaHei,
          Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #999999;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
      .count {
        font-family: Helvetica, Helvetica;
        font-weight: bold;
        font-size: 24px;
        color: #333333;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
    }
  }
}

.box-analysis {
  width: 100%;
  height: auto;
  background-color: #f0f0f0;
  padding: 20px 20px 0 20px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  .box-search {
    width: 100%;
    height: 40px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    .box-search-left {
      width: 100%;
      height: 100%;
      display: flex;
      flex: 1;
      align-items: center;
      box-sizing: border-box;
    }
    .box-search-right {
      width: 100%;
      height: 100%;
      display: flex;
      flex: 1;
      justify-content: flex-end;
      align-items: center;
      padding-left: 20px;
      box-sizing: border-box;
      ::v-deep .zdy-input {
        width: 264px;
        height: 34px;
        line-height: 34px;
        background: #ffffff;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        margin-right: -2px;
        .el-input__wrapper {
          border-radius: 2px 0 0 2px;
        }
      }
      ::v-deep .zdy-btn {
        width: 56px;
        height: 34px;
        line-height: 34px;
        border-radius: 0;
        border-radius: 0px 2px 2px 0px;
      }
    }
  }
  .box-controller {
    width: 100%;
    height: auto;
    display: flex;
    /* flex: 1; */
    background-color: #fff;
    padding: 15px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }
  .controller-page {
    width: 100%;
    height: 100%;
  }
}
.box-tabs {
  width: 100%;
  height: 36px;
  line-height: 36px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  .item {
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 5px;
    padding: 0 3px;
    cursor: pointer;
    span {
      display: inline-block;
      font-family:
        Microsoft YaHei,
        Microsoft YaHei;
      font-weight: 600;
      font-size: 16px;
      color: #333333;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
  .item-active {
    border-bottom: 3px solid #0e7be2;
    margin-bottom: -3px;
    span {
      color: #0c7cff;
    }
  }
}

.card-table {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}
.card-total-txt {
  width: 100%;
  height: 20px;
  line-height: 20px;
  font-family:
    Microsoft YaHei,
    Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #999999;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin: 9px 0 5px 0;
}

.card-list {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  grid-template-rows: repeat(4, 170px);
  max-height: calc((170px + 10px) * 4);
  overflow: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}
.card-item {
  width: auto;
}

.card-pagination {
  width: 100%;
  height: 36px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
}
</style>
